<script>
const name = 'longan-component';

export default {
  data() {
    return { price: 0 }
  },
  setup(props,context) {
    console.log(`${name}: setup`);
    console.log( this );
  },
  beforeCreate() {
    console.log(`${name}: before create`);
    console.log( this );
  },
  created() {
    console.log(`${name}: created`);
  },
  beforeMount() {
    console.log(`${name}: before mount`);
  },
  mounted() {
    console.log(`${name}: mounted`);
  },
  beforeUpdate() {
    console.log(`${name}: before update`);
  },
  updated() {
    console.log(`${name}: updated`);
  },
  beforeUnmount() {
    console.log(`${name}: before unmount`);
  },
  unmounted() {
    console.log(`${name}: unmounted`);
  }
}
</script>

<template>
  <div>
    <h4>Longan : 龙眼(桂圆)</h4>
    <input type="number" v-model="price">
    <p>{{price}}</p>
  </div>
</template>